<template>
  <div class="otor-pagination">
    <span class="total">共 {{total}} 条记录</span>
    <el-select name id v-model="defaultPageSize" @change="changPageSize" v-if="isShowPageSize" size="mini" style="width:70px;">
      <el-option value="15">15</el-option>
      <el-option value="30">30</el-option>
      <el-option value="50">50</el-option>
      <el-option value="100">100</el-option>
      <el-option value="200">200</el-option>
    </el-select>
    <ul class="page">
      <li :class="{'disabled': current == 1}">
        <a href="javascript:;" @click="setCurrent(current - 1)">«</a>
      </li>
      <li :class="{'disabled': current == 1}">
        <a href="javascript:;" @click="setCurrent(1)">首页</a>
      </li>
      <li v-for="p in grouplist" :key="p.val" :class="{'active': current == p.val}">
        <a href="javascript:;" @click="setCurrent(p.val)">{{ p.text }}</a>
      </li>
      <li :class="{'disabled': current == page}">
        <a href="javascript:;" @click="setCurrent(page)">尾页</a>
      </li>
      <li :class="{'disabled': current == page}">
        <a href="javascript:;" @click="setCurrent(current + 1)">»</a>
      </li>
      <li class="page_size" v-if="isPageItemCount">
        每页显示<el-input v-model.number="pageItemCount" size="mini"></el-input>条
      </li>
      <li v-if="isPageItemCount">
        <el-button type="primary" size="mini" plain @click="setPageItem">确定</el-button>
      </li>
    </ul>
  </div>
</template>

<script type="es6">
import "@/assets/less/pagination.less";
import * as types from "../../store/types";
export default {
  data() {
    return {
      current: this.currentPage,
      defaultPageSize: this.$store.state.defaultPageSize,
      pageItemCount: 15,
    };
  },
  props: {
    total: {
      // 数据总条数
      type: Number,
      default: 0
    },
    display: {
      // 每页显示条数
      type: Number,
      default: 10
    },
    currentPage: {
      // 当前页码
      type: Number,
      default: 1
    },
    pagegroup: {
      // 分页条数
      type: Number,
      default: 5,
      coerce: function(v) {
        v = v > 0 ? v : 5;
        return v % 2 === 1 ? v : v + 1;
      }
    },
    isShowPageSize: {
      type: Boolean,
      default: false
    },
    isPageItemCount: {
      type: Boolean,
      default: false
    },
    isKeyEnter: {
      type: Boolean,
      default: true
    },
  },
  computed: {
    page: function() {
      // 总页数
      if (!this.isShowPageSize) {
        return Math.ceil(this.total / this.display);
      } else {
        return Math.ceil(this.total / this.defaultPageSize);
      }
    },
    grouplist: function() {
      // 获取分页页码
      var len = this.page,
        temp = [],
        list = [],
        count = Math.floor(this.pagegroup / 2),
        center = this.current;
      if (len <= this.pagegroup) {
        while (len--) {
          temp.push({ text: this.page - len, val: this.page - len });
        }
        return temp;
      }
      while (len--) {
        temp.push(this.page - len);
      }
      var idx = temp.indexOf(center);
      idx < count && (center = center + count - idx);
      this.current > this.page - count && (center = this.page - count);
      temp = temp.splice(center - count - 1, this.pagegroup);
      do {
        var t = temp.shift();
        list.push({
          text: t,
          val: t
        });
      } while (temp.length);
      if (this.page > this.pagegroup) {
        this.current > count + 1 &&
          list.unshift({ text: "...", val: list[0].val - 1 });
        this.current < this.page - count &&
          list.push({ text: "...", val: list[list.length - 1].val + 1 });
      }
      return list;
    }
  },
  methods: {
    setPageItem(){
      this.defaultPageSize = this.pageItemCount;
      this.$store.commit(types.CHANGE_PAGE_SIZE, this.defaultPageSize);
      this.$emit("pagechange", 1);
    },
    setCurrent: function(idx) {
      if (this.current != idx && idx > 0 && idx < this.page + 1) {
        this.current = idx;
        this.$emit("pagechange", this.current);
      }
    },
    changPageSize() {
      this.pageItemCount = this.defaultPageSize;
      this.$store.commit(types.CHANGE_PAGE_SIZE, this.defaultPageSize);
      // window.console.log(this.$store.state.defaultPageSize);
      this.$emit("pagechange", 1);
    }
  },
  watch: {
    currentPage: function(newPage) {
      // window.console.log("newPage" + newPage);
      this.current = newPage;
    }
  },
  created(){
    var _this = this;
      document.onkeydown = function() {
          // window.console.log(e);
          let key = window.event.keyCode;
          // window.console.log(key);
          if(key==13&&_this.isPageItemCount&&_this.isKeyEnter){
            _this.setPageItem();
          }
      };
  }
};
</script>